<template>
    <view class="myCollect">
        <view class="f w-f hearder" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="w-f f ai-c h-88 jc-s-b ph-32">
                <image src="../../static/back.png" class="w-42 h-42" @click='back'></image>
                <view class="w-284 h-64 tab f b-16">
                    <view class="f ai-c jc-c fs-26 text-color4" :class="curt == 0 ? 'active' : ''" @click="changeCurt(0)">商品</view>
                    <view class="f ai-c jc-c fs-26 text-color4" :class="curt == 1 ? 'active' : ''" @click="changeCurt(1)">店铺</view>
                    <view class="f ai-c jc-c fs-26 text-color4" :class="curt == 2 ? 'active' : ''" @click="changeCurt(2)">服务</view>
                </view>
                <view></view>
            </view>
        </view>
        <view :style="{ paddingTop: statusBarHeight + 'px' }"><view class="h-88 w-f"></view></view>
        <Goods v-show="curt == 0" />
        <Shop v-show="curt == 1" />
        <Serve v-show="curt == 2" />
    </view>
</template>
<script setup lang="ts">
import Goods from './Goods.vue';
import Shop from './Shop.vue';
import Serve from './Serve.vue';
import { ref } from 'vue';
const curt = ref(0);
function changeCurt(data: number) {
    curt.value = data;
}
function back(){
	uni.navigateBack()
}
//头部
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
</script>
<style lang="scss" scoped>
.myCollect {
    .tab {
        background: #f5f5f5;
        view {
            width: 33.33%;
        }
        .active {
            background: #ffffff;
            box-shadow: 0 2rpx 8rpx 0 #00000029;
            border-radius: 12rpx;
        }
    }
    .hearder {
        background: #fff;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 111;
    }
}
</style>
